<!--
 * @Author: your name
 * @Date: 2020-05-25 09:29:16
 * @LastEditTime: 2020-06-01 19:11:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tuyibo\components\Like.vue
--> 

<template>
<section class="like">
  <div class="like-inner">
    <el-card class="img-list-card">
      <div slot="header">
        <span class="card-title">相似图片</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="linkToMore()">查看更多</el-button>
      </div>
      <el-row :gutter="16">
        <el-col :span="6" v-for="(item,index) in likeImgList" :key="index">

           <!-- <el-popover placement="left-start" trigger="hover" style="width:100%;">
              <el-image :src="item.img_thumbnail | fillImgShot" fit="contain" style="background-color:#f5f5f5;"></el-image>
              <el-button slot="reference" style="padding:0;margin:0;border-radio:0;border:none;text-align:center;width:100%">
                <el-image style="border:none;background-color:#f5f5f5;width:100%" fit="cover" :src="item.img_thumbnail | fillImgShot" @click="clickToDetail(item.id)"></el-image>
              </el-button>
            </el-popover> -->

          <el-image :src="item.img_thumbnail | fillImgShot" :alt="item.title"
              @click="clickToDetail(item.id)" fit="cover" style="width:100%;"></el-image>
        </el-col>
      </el-row>
    </el-card>
  </div>
</section>
</template>

<script>
export default {
  name: 'Like', //猜你喜欢列表
  data() {
    return {
      likeImgList: [],
      tag_id:[],
      category_id:''
    }
  },
  props:["likeTag_id","likeCategory"],
  methods:{
    clickToDetail(id) {
      this.$router.push(`/detail?id=${id}`);
      document.body.scrollTop=document.documentElement.scrollTop=0;
    },
    linkToMore(){
      var tag_id=this.likeTag_id
      var category_id=this.likeCategory
      this.$router.push({
        name:'list',
        path:'/list',
        query:{ tag_id:tag_id.join('|'), category_id:category_id, title:'相似图片' }
      })
    }
  },
  watch: {
    'likeTag_id':{
      deep:true,
      handler: function(newV, oldV) {
        this.tag_id=newV
        this.category_id=this.likeCategory
        this.$axios.post("/api/web/getImageLikely", {
          queryData: { tag_id:this.tag_id, category_id:this.category_id },
          page: 1,
          pagesize: 8
        })
        .then(res => {
          this.likeImgList = res.data.rows;
        });
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.like {
    margin-bottom: 24px;
    .like-inner {
        max-width: 1380px;
        padding: 0 16px;
        margin: 0 auto;
        .img-list-card {
            /deep/.el-card__body {
                overflow: hidden;
                padding-bottom: 4px;
                .el-image {
                    height: 200px !important;
                    margin-bottom: 16px;
                }
            }
        }
    }
}
</style>
